/* 时间选择面板 */
<template>
  <div class="date-panel">
    <i class="el-icon-caret-left cursor-pointer text-20px" @click="preMonth"/>

    <!-- 时间选择面板 -->
    <el-popover
      v-model="monthPickerVisible"
      placement="bottom">
      <p slot="reference" class="time">{{ getYearMonthCmp }}</p>
      <el-date-picker
        v-model="timeVmodel"
        type="month"
        value-format="yyyy-MM-dd"
        placeholder="选择月"
        @change="monthPickerVisible = false"
      >
      </el-date-picker>
    </el-popover>

    <i class="el-icon-caret-right cursor-pointer text-20px" @click="nextMonth"/>
  </div>
</template>

<script>
export default {
  props: {
    date: {
      type: String,
      default: undefined
    }
  },
  data () {
    return {
      monthPickerVisible: false
    }
  },
  computed: {
    getYearMonthCmp () {
      return this.date && this.$dayjs(this.date).format('YYYY 年 MM 月')
    },
    timeVmodel: {
      get () {
        return this.date
      },
      set (val) {
        this.$emit('update:date', val)
      }
    }
  },
  methods: {
    // 事件 - 切换上一月
    preMonth () {
      const res = this.$dayjs(this.date).add(-1, 'month').format('YYYY-MM-DD')
      this.$emit('update:date', res)
    },
    // 事件 - 切换下一月
    nextMonth () {
      const res = this.$dayjs(this.date).add(1, 'month').format('YYYY-MM-DD')
      this.$emit('update:date', res)
    }
  }
}
</script>

<style lang="scss" scoped>
  .date-panel {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .time {
    width: 250px;
    font-size: 18px;
    text-align: center;
  }

  .icon {
    width: 1.8em;
    height: 1.8em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .pointer {
    cursor: pointer
  }
</style>
